<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">

		<title>w0929_2_event</title>
		<script>
			window.onload = function() {
				//버튼을 클릭하면 함수 호출 실행
				//id가 "btn01"인 요소.클릭 = f1()
				var btn = document.getElementById("btn01");
				btn.onclick = function() {
					alert(this);
					//alert('f1함수: 그냥 호출..');
					//이벤트가 발생한 객체에 js의 style객체의 속성을 변경, 서식변경
				this.style.color="green";
				this.style.backgroundColor="lightgreen";
				this.style.fontFamily="맑은 고딕";
				
				//이벤트가 발생한 객체의 자식노드인 textNode의 값을 '변경 후로 수정'
				this.firstChild.nodeValue="변경 후";
				//이벤트제거
				btn.onclick = null;
				};
			};
			//end of window.onload
		</script>
	</head>                                                                          

	<body>
		<button id="btn01" >
			f1()호출
		</button>

	</body>
</html>
